<template>
	<view>
		<view class="fixed-button">
			<uni-icons class="glow-button" type="plus" size="50" color='#3c9cff' @click="show = true"></uni-icons>
		</view>
		<view class="cardBg" v-if="productList&&productList.length>0">
			<view class="list" v-for="(item,index) in productList" :key="index">
				<view class="row">
					<view class="left">
						<view class="text">{{item.productName}}</view>
					</view>
					<view class="right">
						<view class="text">{{item.productDesc}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cardBg" v-else>
			<u-skeleton rows="4" rowsHeight="25"></u-skeleton>
			<!-- <u-empty mode="data"></u-empty> -->
		</view>
		<u-popup mode="top" :round="10" :show="show" @close="close">
			<view>
				<view class="popupBg">
					<u--form labelWidth='70' labelPosition="left" :model="product" ref="uForm">
						<u-form-item label="产品名称" borderBottom>
							<u--input v-model="product.productName" border="none" placeholder="请输入产品名称"></u--input>
						</u-form-item>
						<u-form-item label="产品描述" borderBottom>
							<u--input v-model="product.productDesc" border="none" placeholder="请输入产品描述"></u--input>
						</u-form-item>
						<u-form-item label="系统定义" borderBottom>
							<u-switch v-model="product.systemValue"></u-switch>
						</u-form-item>
					</u--form>
					<view>
						<u-button type="primary" text="确定" @click="addProduct"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				productList: [],
				product: {
					productName: '',
					productDesc: '',
					systemValue: true,
					createTime: Date.now()
				},
			}
		},
		onLoad() {
			this.getProduct()
		},
		methods: {
			async getProduct() {
				const db = uniCloud.database()
				const res = await db.collection('products').get()
				this.productList = res.result.data
			},
			close() {
				this.show = false
			},
			async addProduct() {
				if (!this.product.productName) return uni.$u.toast('请输入产品名称')
				if (!this.product.productDesc) return uni.$u.toast('请输入产品描述')
				const db = uniCloud.database()
				uni.showLoading({
					title: '添加中...'
				});
				await db.collection('products').add(this.product)
				await uni.$u.toast('添加成功')
				await uni.hideLoading();
				await this.getProduct()
				this.show = false
				this.product = {}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		border-bottom: 1px solid #eee;
		.row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			position: relative;
			background: #fff;
			.left {
				display: flex;
				align-items: center;

				.text {
					padding-left: 20rpx;
					color: #666
				}
			}

			.right {
				display: flex;
				align-items: center;

				.text {
					font-size: 28rpx;
					color: #aaa;

				}
			}
		}
		&:last-child {
			border-bottom: 0
		}
	}
</style>